import React, { Component } from 'react'
import {DeleteOutlined} from "@ant-design/icons";
import {SOneGoods} from "../../styled/shoppingCart"
import { withRouter } from 'react-router-dom';
import { apilink } from '../../api/apilink';
class Onegoods extends Component {
    constructor(props){
        super(props)
        this.state={
            goodsnum:this.props.cartInfo.listGoodsNum,
            xiaoji:this.props.cartInfo.listGoodsNum * this.props.cartInfo.price,
            price:this.props.cartInfo.price,
            checked:this.props.cartInfo.goodsChecked
        }
    }
    componentDidMount(){
        console.log(this.props)
    }
 
    btn_jian(){
        
        if(this.state.goodsnum === 1){
            return;
        }
        let goodsnum = this.state.goodsnum-1;
        let xiaoji = this.state.price * goodsnum
        this.setState({
            goodsnum:goodsnum,
            xiaoji:xiaoji
        },()=>{

            this.FUcheck()
            this.updata_info()
        })
    }
    btn_add(){
        let goodsnum = this.state.goodsnum+1;
        let xiaoji = this.state.price * goodsnum
        this.setState({
            goodsnum:goodsnum,
            xiaoji:xiaoji,
            
        },()=>{
            this.FUcheck()
            this.updata_info()
        })

    }
    //勾选
    FUcheck(){
        console.log(this.refs.checked.checked)
        if(this.refs.checked.checked){
            this.props.FUtotals(this.state.xiaoji)
            this.setState({
                checked:1
            },()=>{
                this.updata_info()
            })
        }else{
            this.setState({
                checked:0
            },()=>{
                this.updata_info()
            })
        }
    
    }
    // 向数据库中存值
    updata_info=()=>{
        let usp = new URLSearchParams();
            usp.append("userId",this.props.cartInfo.userId);
            usp.append("listGoodsId",this.props.cartInfo.listGoodsId);
            usp.append("listGoodsNum",this.state.goodsnum);
            usp.append("goodsChecked",this.state.checked);
            usp.append("totalsMoney",this.state.xiaoji);
        apilink("/api/cart_updata_info","post",usp).then((ok)=>{
            console.log(ok)
        }).catch((err)=>{
            console.log(err)
        })
    }
    //删除按钮
    btn_del(){
        console.log(this.props.cartInfo.listGoodsId)
        console.log(this.props.cartInfo.userId)
        let usp = new URLSearchParams();
            usp.append("userId",this.props.cartInfo.userId);
            usp.append("listGoodsId",this.props.cartInfo.listGoodsId);
            apilink("/api/cartdel","post",usp).then((ok)=>{
        // apilink("/api/cart_del","post",usp).then((ok)=>{
            if(ok.data === "cart_del_success"){
                this.forceUpdate();
                this.props.updata();
                console.log(ok)
                // alert("删除成功")
               
            }
            else{
                alert("删除失败")
            }
        }).catch((err)=>{
            console.log(err)
        })
    }
    render() {
        if(this.props.cartInfo){
        }
        let {color,detailsImg, goodsChecked, id, kind, listGoodsId, listGoodsNum, mainImg, price, productData, productInfo, productNumber, title, totalsMoney, userId} = this.props.cartInfo
        return (
            <SOneGoods>
            <div className="bigbox content">
                <div className="checked">
                    {/* {goodsChecked?} */}
                    <input type="checkbox" onClick={this.FUcheck.bind(this)} defaultChecked={goodsChecked?true:false}  ref="checked"/>
                </div>
                <div className="img">
                    <img src={mainImg} alt=""/>
                </div>
                <div className="info"> 
                    <div>
                        <h3>{`${title} ${kind.split(",")[0]} ${color} ${productData} ${productInfo}`}</h3>
                        <p className="num">产品编号：<span>{productNumber}</span></p>
                        <p className="goodsNumber"><button onClick={this.btn_jian.bind(this)}>-</button> <span>{this.state.goodsnum}</span><button onClick={this.btn_add.bind(this)}>+</button></p>
                    </div>
                </div>
                <div className="price">
                    <p>单价：<i> {this.state.price}￥</i></p>
                    <DeleteOutlined onClick={this.btn_del.bind(this)}/>
                    <b>小计： <i>{this.state.price * this.state.goodsnum}</i></b>
                </div>
            </div>
            </SOneGoods>
        )
    }
}
export default withRouter(Onegoods)